<template>
  <span
    v-if="!element"
    v-loading="load"
    class="el-txt"
    @click="clickOnline($event)"
    v-html="view"
  />
  <component :is="element" v-else ref="con" :config="cfg" />
</template>
<script>
import control from '../mixins/control'
export default {
  mixins: [control],
  data() {
    return {
      load: false,
      map: null,
      daoVal: null,
      element: null,
      tmpConfig: null
    }
  },
  computed: {
    returnValue() {
      return this.val
    },
    cfg: {
      get() {
        return this.tmpConfig
      },
      set(conf) {
        this.tmpConfig = conf
      }
    },
    view() {
      console.log(this.val, 'this.val')
      const imgs = this.val.map(r => {
        return `<a class="link target="_blank" href="${r.path}?rna=${r.name}&dl=1">${r.name}</div>`
      })
      return imgs.join('')
    } },
  created() {
    console.log(typeof this.value, '----------------------------------------')
    if (typeof this.value === 'undefined') {
      this.val = null
    } else {
      this.val = this.value
    }
  },
  methods: {
    clickOnline(event) {

    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .online {
  color: #409eff;
  line-height: 1.5;
  width: 100%;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
</style>
